<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body >
    <!-- div指定vue的作用范围-->
    <div id="app">
        <!--v-model vue指令，用于绑定模型数据 -->
        请输入：<input type="text" v-model="name"><button v-on:click="add()">点我试试</button> <br>
        <!--{{}} vue插值表达式 ，常见作用，是用于展示模型数据 。在表达式中还可以调用方法（调用的方法必须有返回值）
            表达式还可以：算术运算、逻辑运算（例如：三元运算符操作）、比较运算等
        -->
        {{name}}是一个美丽的小姐姐，有{{num}}漂亮的小姐姐喜欢他。
        <!--{{100+100}}-->

    </div>
</body>
<script>
    //初始化vue实例对象  {}
    new Vue({
       el: "#app", //指定vue作用的HTML元素
       data:{//初始化vue模型数据
           name:"琦琦",
           num:1
       },
        methods:{//vue声明的事件方法
           /*add:function () {
               this.num++; //this代表当前vue对象
           }*/
            add() {
                this.num++; //this代表当前vue对象
            }
        },
        /*
        * created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        * mounted(安装,装好的意思 ):在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
        *
        * */
        beforeCreate(){
           console.log("beforeCreate 执行了");
        },
        created(){
            console.log("created 执行了");
        },
        beforeMount(){
            console.log("beforeMount 执行了");
        },
        mounted(){
            console.log("mounted 执行了");
        },
        beforeUpdate(){
            console.log("beforeUpdate 执行了");
        },
        updated(){
            console.log("updated 执行了");
        }

    });

</script>
</html>